<template>
	<div class="business-wrap">
		<div class="top-wrap">
			<div class="tops">
				<div class="tops-left">
					<h4 class="font-wt font-16">{{ shopData.name }}</h4>
					<div class="sales-cont">
						<van-rate
							v-model="value"
							:size="20"
							color="#ffd21e"
							void-icon="star"
							void-color="#eee"
							:readonly="true"
						/>
						<span class="num">(661)</span
						><span>月售{{ shopData.sellCount }}单</span>
					</div>
				</div>
				<div class="tops-right">
					<van-icon name="like" />
					<p class="font-14">已收藏</p>
				</div>
			</div>
			<!-- 配送信息 -->
			<div class="delivery">
				<ul class="list">
					<li>
						<h4>起送价</h4>
						<p>
							<span class="nums">{{ shopData.minPrice }}</span
							><span class="text">元</span>
						</p>
					</li>
					<li>
						<h4>商家配送</h4>
						<p>
							<span class="nums">20</span
							><span class="text">元</span>
						</p>
					</li>
					<li>
						<h4>平均配送时间</h4>
						<p>
							<span class="nums">{{ shopData.deliveryTime }}</span
							><span class="text">分</span>
						</p>
					</li>
				</ul>
			</div>
		</div>

		<div class="foot-wrap">
			<!-- 活动公告 -->
			<div class="activity">
				<h3>活动与公告</h3>
				<p class="font-14">{{ shopData.bulletin }}</p>
			</div>

			<!-- 配送服务 -->
			<div class="delivery-service">
				<p
					class="discount my font-14"
					v-for="(item, i) in shopData.supports"
					:key="i"
				>
					<span class="reduce mr-8 fff">折</span>{{ item }}
				</p>
				<p class="service">
					<van-icon name="bullhorn-o" />
					<span class="text1">配送服务:</span>
					<span class="text2">蜂鸟专送</span>
					<span>{{ shopData.description }}</span>
				</p>
				<p class="times">
					<van-icon name="clock-o" />
					<span class="deltime">配送时间:</span>
					<span>{{ date }}</span>
				</p>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";
	import { formatHms } from "@/filters/getTime";
	export default {
		data() {
			return {
				value: 5,
				businessData: {},
				date: "",
			};
		},
		computed: {
			...mapState("shop", ["shopData"]),
		},
		watch: {
			// shopData() {
			// 	let times=this.shopData.date.map(v=>formatHms(v))
			//     this.date=times.join('-')
			// },
			shopData: {
				handler() {
					let times = this.shopData.date.map((v) => formatHms(v));
					this.date = times.join("-");
				},
				immediate: true, //立即执行handler里面代码
			},
		},
		methods: {},
	};
</script>

<style lang="scss" scoped>
	.business-wrap {
		height: 100%;
		overflow-y: scroll;
		.top-wrap {
			padding: 0 20px;
			border-top: 1px solid #f4f5f7;
			border-bottom: 20px solid #f4f5f7;
		}
		.tops {
			display: flex;
			justify-content: space-between;
			padding: 20px 0;

			.tops-left {
				h4 {
					margin-bottom: 10px;
				}
				.sales-cont {
					span {
						font-size: 14px;
						color: #999;
					}
					.num {
						margin: 0 10px;
					}
				}
			}
			.tops-right {
				text-align: center;
				.van-icon {
					color: red;
					font-size: 18px;
					margin-bottom: 10px;
				}
			}
		}

		.delivery {
			padding: 20px 0px 10px 0px;
			border-top: 1px solid #f4f5f7;
			.list {
				display: flex;
				justify-content: space-around;
				align-items: center;
				li {
					text-align: center;
					h4 {
						margin-bottom: 10px;
						font-weight: 400;
						color: #ccc;
					}
					p {
						.nums {
							font-size: 24px;
							color: #353535;
							margin-right: 5px;
						}
						.text {
							color: #666;
						}
					}
				}
			}
		}

		.foot-wrap {
			padding: 0 20px;
		}
		// 活动
		.activity {
			padding: 20px 0;
			border-bottom: 1px solid #f4f5f7;

			h3 {
				color: #353535;
				font-size: 24px;
				font-weight: 400;
				margin-bottom: 20px;
				font-weight: 400;
			}
			p {
				color: #f16c49;
			}
		}
		.delivery-service {
			// padding: 0 20px;
			padding-top: 10px;
			.reduce {
				display: inline-block;
				font-weight: bold;
				color: #de7a76;
				background-color: red;
				padding: 2px;
				border-radius: 3px;
			}
			.service {
				margin-bottom: 20px;
				.text1 {
					margin: 0 10px;
				}
				.text2 {
					background: rgb(255, 195, 0);
					color: #fff;
					font-size: 13px;
					margin-right: 10px;
					padding: 2px;
				}
			}
			.times {
				.deltime {
					margin: 0 10px;
				}
			}
		}
	}
</style>
